<template>
  <div style="overflow: auto">
    <el-breadcrumb class="app-breadcrumb" separator="/">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
          <span
            v-if="
              item.redirect === 'noRedirect' || index == levelList.length - 1
            "
            class="no-redirect"
            >{{ item.meta.title }}</span
          >
          <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
    <!-- 车队人员 -->
    <h4 style="border-bottom: 1px solid #ccc; padding-bottom: 5px">车队人员</h4>
    <div class="sunset-team">
      <el-carousel
        type="card"
        indicator-position="outside"
        :height="bannerHeight + 'px'"
      >
        <el-carousel-item v-for="item in nameList" :key="item.id">
          <div style="" class="profile-details">人物：{{ item.name }}</div>
          <el-row>
            <el-col :span="24" class="banner_img">
              <img
                ref="bannerHeight"
                @load="imgLoad"
                :src="item.pic"
                style="width: 100%; height: 100%"
                @click="imgClick(item.id)"
              />
            </el-col>
          </el-row>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 面对面 -->
    <h4>开黑宗旨</h4>
    <div class="face-to-face">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="默契配合 Tacit cooperation" name="1">
          <div>
            团队协作：在游戏中，默契配合是胜利的关键。每位队员应了解自己在团队中的角色和责任，及时分享信息并响应队友的请求。
          </div>
          <div>
            互相支持：无论是上单的单挑还是下路的团战，互相支持是保持团队士气高涨的关键。通过及时的召唤师技能使用和有效的线上帮助，我们能够共同赢得比赛。
          </div>
        </el-collapse-item>
        <el-collapse-item title="流畅沟通 Communicate fluently" name="2">
          <div>
            有效沟通：在游戏中保持开放和清晰的沟通渠道至关重要。及时分享敌方位置、冷却时间和战术意图，能够帮助我们在关键时刻做出正确的决策。
          </div>
          <div>
            尊重观点：每位队员的意见和建议都应得到尊重和认真对待。通过相互倾听和理解，我们能够更好地调整战术和战略，以应对不同的游戏局面。
          </div>
        </el-collapse-item>
        <el-collapse-item title="友好氛围 Friendly atmosphere" name="3">
          <div>
            积极态度：维持一种积极向上的游戏氛围是我们的宗旨之一。无论胜负，我们都应以学习和成长为目标，避免因个人情绪影响整体团队情绪。
          </div>
          <div>
            互相支持：在游戏中遇到挑战时，我们要以友好和支持的态度互相鼓励。这不仅有助于保持队伍的凝聚力，也能提高每位队员的游戏体验和技术水平。
          </div>
        </el-collapse-item>
        <el-collapse-item title="耐心专注 Stick with LOL" name="4">
          <div>
            专注持久：LOL是一个需要耐心和专注的游戏。我们每位队员都应保持高度专注，不论是游戏初期的发育还是后期的团战，都要做到耐心专注。
          </div>
          <div>
            反思总结：每场比赛结束后，我们会一起回顾游戏过程，分析胜利与失败的原因，并从中吸取经验教训。通过不断的反思和总结，我们能够在下一场比赛中更加进步。
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import pathToRegexp from "path-to-regexp";
export default {
  data() {
    return {
      levelList: null,
      bannerHeight: "",
      nameList: [
        { name: "杨  军", id: 1, pic: require("@/assets/lol_images/yj.jpg") },
        { name: "袁  鹏", id: 2, pic: require("@/assets/lol_images/yp.jpg") },
        // { name: "殷明浩", id: 3, pic: require("@/assets/lol_images/yj.jpg") },
        { name: "朱继翔", id: 4, pic: require("@/assets/lol_images/zjx.jpg") },
        { name: "雷道安", id: 5, pic: require("@/assets/lol_images/lda.jpg") },
        { name: "姜新科", id: 6, pic: require("@/assets/lol_images/jxk.jpg") },
        { name: "黎少阳", id: 7, pic: require("@/assets/lol_images/lsy.jpg") },
        { name: "李荣文", id: 8, pic: require("@/assets/lol_images/lrw.jpg") },
      ],
      activeNames: ["1"],
    };
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    },
  },
  created() {
    this.getBreadcrumb();
  },
  mounted() {
    this.imgLoad();
    window.addEventListener("resize", () => {
      this.bannerHeight = this.$refs.bannerHeight[0].height;
      this.imgLoad();
    });
  },
  methods: {
    getBreadcrumb() {
      // only show routes with meta.title
      let matched = this.$route.matched.filter(
        (item) => item.meta && item.meta.title
      );
      const first = matched[0];

      if (!this.isDashboard(first)) {
        matched = [{ path: "/dashboard", meta: { title: "首页" } }].concat(
          matched
        );
      }
      this.levelList = matched.filter(
        (item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
      );
    },
    isDashboard(route) {
      const name = route && route.name;
      if (!name) {
        return false;
      }
      return (
        name.trim().toLocaleLowerCase() === "Dashboard".toLocaleLowerCase()
      );
    },
    pathCompile(path) {
      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
      const { params } = this.$route;
      var toPath = pathToRegexp.compile(path);
      return toPath(params);
    },
    handleLink(item) {
      const { redirect, path } = item;
      if (redirect) {
        this.$router.push(redirect);
        return;
      }
      this.$router.push(this.pathCompile(path));
    },
    handleChange(val) {
      console.log(val);
    },
    imgLoad() {
      this.$nextTick(() => {
        this.bannerHeight = this.$refs.bannerHeight[0].height;
      });
    },
    imgClick(id){
      console.log(id);
      this.nameList[0].pic = require('@/assets/lol_images/lrw.jpg')
    }
  },
};
</script>

<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 50px;
  margin-left: 8px;

  .no-redirect {
    color: #97a8be;
    cursor: text;
  }
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.sunset-team {
  width: 95%;
  margin: 0 auto;
}

h4 {
  margin: 0 auto;
  width: 95%;
  margin-bottom: 10px;
}

.face-to-face {
  border: 1px solid #ccc;
  padding: 10px;
  width: 95%;
  margin: 0 auto;
}

.profile-details {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  padding-left: 10px;
  height: 40px;
  line-height: 40px;
  background: linear-gradient(
    to left,
    rgba(255, 165, 0, 1),
    rgba(255, 69, 0, 1),
    rgba(139, 0, 0, 1)
  );
}
</style>
